<template>
  <div class="maintainkids">
    <my-head title="维护" :isRightClick = "true"/>
    
    <mu-text-field v-model="vinsure" placeholder="VIN" ref="vin" class='input' @keyup.enter.native="done()"><i class="iconfont icon-saomiao" @click="scan('vin')"></i></mu-text-field>

    <mu-paper class="paper" :z-depth="2">
      <div class="list-content">VIN ：<span>{{vin}}</span></div>
      <div class="list-content">车型：<span>{{car}}</span><em class="space"></em>颜色：<span>{{color}}</span></div>
      <div class="list-content">类型：<span>{{type}}</span></div>
      <div class="list-content">库位：<span class="library-position">{{location}}</span></div>
    </mu-paper>

    <div class="btn">
      <mu-button large color="primary" @click="gotoabnormal()">异常上报</mu-button>
      <mu-button large :disabled="isDisabledDone" color="primary" @click="done()">维护完成</mu-button>
    </div>
    <scanning v-if="isScanning" :mark="scanMark" v-on:childByValue="childByValue" v-on:closeing="closeing"/>
  </div>
</template>

<script>
import myHead from '@/components/header'
import scanning from "@/components/scanning"
import api from "@/common/api"
export default {
  name: 'maintainkids',
  components: {
    myHead, scanning
  },
  data () {
    return {
      scanMark: '',
      isScanning: false,
      vinsure: '',
      vin: '',
      car: '',
      color: '',
      location: '',
      type: '',
      isDisabledDone: false,
      code: '',
      requestOnce: true
    }
  },
  methods: {
    closeing (val) {
      val ? this.isScanning = false : null;
    },
    childByValue (val) {
      if(val){
        if(val.split('&')[1] == 'vin'){
          this.vinsure = val.split('&')[0];
          this.done();
        }
      }
    },
    scan (txt) {
      this.scanMark = txt;
      this.isScanning = true;
    },
    gotoabnormal () {
      this.$router.push({name: "abnormal", params: {vin: this.vin}});
    },
    done () {
      if(this.requestOnce){
        this.requestOnce = false;
        this.common.reqData(api.app('maintainDone'), Object.assign({},this.$store.state.user,{
          content: {
            code: this.code,
            vin: this.vin
          }
        }), res=>{
          this.requestOnce = true;
          let datas = res.data;
          this.tableLoading = false;
          console.log("维护管理详细",datas);
          if(datas.status == 100){
            this.Toast.fail({
              mask: true,
              message: "维护完成"
            });
            this.isDisabledDone = true;
          }else{
            this.Toast.fail({
              mask: true,
              message: datas.msg
            });
          }
        },err =>{
            this.requestOnce = true;
            console.log(err)
            this.Toast.clear();
        });
      }
    }
  },
  mounted () {
    let row = this.$route.params.row;
    this.code = this.$route.params.pageCode;
    this.vin = row.vin;
    this.type = row.type;
    this.color = row.color;
    this.location = row.location;
    this.car = row.car;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.maintainkids{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
.input{
    display: block;
    margin: 15px auto;
    width: 85%;
}
.paper, .state, .msg{
    width: 85%;
    margin: 4em auto 0;
    padding: 1.5em 0;
}
.state, .msg{
    text-align: center;
    color: red;
    font-size: 1em;
}
.list-content{
    padding: 8px 20px;
}
.library-position{
    font-size: 2.2em;
    font-weight: bold;
    color: red;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.space{
    padding: 0 20px;
}
.btn{
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.btn .mu-raised-button{
  font-size: 18px;
  height: 40px;
  line-height: 40px;
}
</style>
